'use strict';

import React from 'react';
import {
  StyleSheet,
  Text,
  ListView,
  View,
  Image,
  TouchableHighlight,
  PixelRatio,
  ActionSheetIOS,
} from 'react-native';
import { Host, DeviceEvent, Device } from "miot";
import { TitleBarBlack } from 'miot/ui';


export default class MoreMenu extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      header: <TitleBarBlack title={navigation.state.params.title} style={{ backgroundColor: '#fff' }}
        onPressLeft={() => { navigation.goBack(); }} />,
    };
  };

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this._createMenuData();
    this.state = {
      dataSource: ds.cloneWithRows(this._menuData.map((o) => (o.name))),
    };
  }

  _createMenuData() {
    this._menuData = [
      {
        'name': '修改设备名称',
        'func': () => {
          Host.ui.openChangeDeviceName();
        }
      },
      {
        'name': '设置设备共享',
        'func': () => {
          Host.ui.openShareDevicePage();
        }
      },
      {
        'name': '检查固件升级',
        'func': () => {
          Host.ui.openDeviceUpgradePage();
        }
      },
    
      {
        'name': '添加快捷方式',
        'func': () => {
          Host.ui.openAddToDesktopPage();
        }
      },
      {
        'name': '设备安全设置',
        'func': () => {
          Host.ui.openSecuritySetting();
        }
      },
      {
        'name': '常见问题',
        'func': () => {
          Host.ui.openHelpPage();
        }
      },
      {
        'name': '反馈问题',
        'func': () => {
          Host.ui.openFeedbackInput();
        }
      },
      {
        'name': '查看使用条款和隐私协议',
        'func': () => {
          const licenseURL = require('../Resources/raw/license_zh.html');
          const policyURL = require('../Resources/raw/privacy_zh.html');
          Host.ui.privacyAndProtocolReview('软件许可及服务协议', licenseURL, '隐私协议', policyURL);
        }
      },
      {
        'name': '授权使用条款和隐私协议',
        'func': () => {
          const licenseURL = require('../Resources/raw/license_zh.html');
          const policyURL = require('../Resources/raw/privacy_zh.html');
          Host.ui.openPrivacyLicense('软件许可及服务协议', licenseURL, '隐私协议', policyURL, (result) => {
            if (result === 'ok') {
              // 同意授权
            } else {
              // 取消授权，默认退出插件
            }
          });
        }
      }
    ];
  }

  componentDidMount(){
    this.listenter = DeviceEvent.deviceTimeZoneChanged.addListener((val)=>{
      console.log("deviceTimeZoneChanged", val);
    })
  }

  componentWillUnmount() {
    
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView style={styles.list} dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)} />
      </View>
    );
  }

  _renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableHighlight underlayColor='#838383' onPress={() => this._pressRow(rowID)}>
        <View>
          <View style={styles.rowContainer}>
            <Text style={styles.title}>{rowData}</Text>
            <Image style={styles.subArrow} source={require("../Resources/sub_arrow.png")} />
          </View>
          <View style={styles.separator}></View>
        </View>
      </TouchableHighlight>
    );
  }

  _pressRow(rowID) {
    console.log("row" + rowID + "clicked!");
    this._menuData[rowID].func();
  }

  onShowDidButtonPress() {
    this.props.navigation.navigate('helloDeveloper');
  }

  showReactART() {
    this.props.navigation.navigate('helloReactART');
  }

  showChart() {
    this.props.navigator.push(ChartDemo.route);
  }

  showActionSheet() {
    if (Host.isIOS)
      ActionSheetIOS.showActionSheetWithOptions({
        options: BUTTONS,
        destructiveButtonIndex: 1,
      },
        (buttonIndex) => {

        });
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    borderTopColor: '#f1f1f1',
    borderTopWidth: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    marginBottom: 0,
    marginTop: 0,
  },

  rowContainer: {
    height: 52,
    alignSelf: 'stretch',
    flexDirection: 'row',
    paddingLeft: 23,
    paddingRight: 23,
    alignItems: 'center',
    flex: 1,
  },
  list: {
    alignSelf: 'stretch',
  },

  title: {
    fontSize: 15,
    color: '#333333',
    alignItems: 'center',
    flex: 1,
  },
  subArrow: {
    width: 7,
    height: 14,
  },
  separator: {
    height: 1 / PixelRatio.get(),
    backgroundColor: '#e5e5e5',
    marginLeft: 20,
  }
});
